<!DOCTYPE html>
<html>
{include file="public/header" /}
<body>
<style>
    .layui-input-inline {
        width: 400px !important;
    }

    .s {
        clear: both;
        margin-top: 10px
    }

    .check {
        border-color: red;
        border-width: 2px;
    }

    .upload_more {
        margin-bottom: 20px;
    }

    .layui-col-xs2 {
        height: 180px;
    }
</style>

<div class="layui-fluid" id="app">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">

                        <ul class="layui-tab-title">
                            <li onclick="go('stage?id='+'{$Request.param.id}')">施工阶段</li>
                            <li class="layui-this" onclick="location.reload()">新增阶段</li>
                        </ul>
                        <div class="layui-tab-content" style="padding-left: 0px;padding-right: 0px">
                            <div class="layui-tab-item layui-show" style="padding-top: 15px">
                                <form class="layui-form " action="">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">项目进度</label>
                                        <div class="layui-input-inline">
                                            <select name="title" lay-verify="required">
                                                <option value="">请选择一个进度</option>
                                                <option value="水电工程">水电工程</option>
                                                <option value="拆除工程">拆除工程</option>
                                                <option value="瓦工工程">瓦工工程</option>
                                                <option value="油工工程">油工工程</option>
                                                <option value="木作安装">木作安装</option>
                                                <option value="竣工保洁">竣工保洁</option>
                                            </select>
                                        </div>
                                        <div class="layui-form-mid">开始时间</div>
                                        <div class="layui-input-inline">
                                            <input type="text" class="layui-input" id="time" name="start_time"
                                                   placeholder=""
                                                   lay-verify="required">
                                        </div>
                                    </div>
                                    <!--<div class="layui-form-item">-->
                                    <!--<label class="layui-form-label">开始时间</label>-->
                                    <!---->
                                    <!--</div>-->

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">选择工种</label>
                                        <div class="layui-input-block">


                                            <input type="checkbox" name="wt" title="拆除工" value="拆除工">


                                            <input type="checkbox" name="wt" title="地板工" value="地板工">


                                            <input type="checkbox" name="wt" title="水电工" value="水电工">


                                            <input type="checkbox" name="wt" title="找平工" value="找平工">


                                            <input type="checkbox" name="wt" title="安装工" value="安装工">


                                            <input type="checkbox" name="wt" title="保洁工" value="保洁工">

                                            <input type="checkbox" name="wt" title="木&nbsp;&nbsp; 工" value="木工">


                                            <input type="checkbox" name="wt" title="壁布工" value="壁布工">
                                            <br>

                                            <input type="checkbox" name="wt" title="吊顶工" value="吊顶工">

                                            <input type="checkbox" name="wt" title="壁纸工" value="壁纸工">

                                            <input type="checkbox" name="wt" title="辅助工" value="辅助工">


                                            <input type="checkbox" name="wt" title="维修工" value="维修工">


                                            <input type="checkbox" name="wt" title="木作工" value="木作工">
                                            <input type="checkbox" name="wt" title="台面工" value="台面工">
                                            <input type="checkbox" name="wt" title="油&nbsp;&nbsp; 工" value="油工">
                                            <input type="checkbox" name="wt" title="瓦&nbsp;&nbsp; 工" value="瓦工">

                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">工价</label>
                                        <div class="layui-input-block">
                                            <input type="text" class="layui-input" name="price" placeholder="请输入"
                                                   lay-verify="required">
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">材料清单</label>
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn " id="cailiao"
                                                    onclick="select_material()">
                                                添加
                                            </button>
                                        </div>

                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label"></label>
                                        <div class="layui-input-block">
                                            <table class="layui-table" lay-skin="line">
                                                <thead>
                                                <tr>
                                                    <th>商品</th>
                                                    <th>数量</th>
                                                    <th style="width: 300px">备注</th>
                                                    <th></th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr v-for="(item,index) in goods">
                                                    <td><b>aaaa</b></td>
                                                    <td>6666</td>
                                                    <td>
                                                        <input type="text" class="layui-input" name="songhuo"
                                                               placeholder="请输入">
                                                    </td>
                                                    <td>
                                                        <span class="layui-btn layui-btn-sm" @click="delGood(index)">删除</span>
                                                    </td>
                                                </tr>

                                                </tbody>
                                            </table>
                                        </div>

                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">送货时间</label>
                                        <div class="layui-input-block">
                                            <input type="text" class="layui-input" id="time2" name="songhuo"
                                                   placeholder="请输入"
                                                   lay-verify="required">
                                        </div>
                                    </div>


                                    <div class="layui-form-item">
                                        <label class="layui-form-label">阶段图纸</label>

                                        <div class="layui-input-block layui-row "
                                             style="display: inline-block;margin-left: 0px;width: 90%;">

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                                     onclick="checkTuzhi(this)">
                                                    <div style="margin-top: 5px;width: 100px" class="layui-elip">
                                                        平面及建筑标记图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"
                                                         src="{$qn_domain}/{$tuzhi.biaoji}?imageMogr2/auto-orient/thumbnail/!120x120r/gravity/Center/crop/120x120/quality/100/interlace/0">
                                                    <input type="hidden" id="biaoji" value="{$tuzhi.biaoji}">
                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                                     onclick="checkTuzhi(this)">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        原始尺寸测量图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"
                                                         src="{$qn_domain}/{$tuzhi.celiang}?imageMogr2/auto-orient/thumbnail/!120x120r/gravity/Center/crop/120x120/quality/100/interlace/0">
                                                    <input type="hidden" id="celiang" value="{$tuzhi.celiang}">
                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                                     onclick="checkTuzhi(this)">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        墙体拆改图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"

                                                         src="{$qn_domain}/{$tuzhi.chaigai}?imageMogr2/auto-orient/thumbnail/!120x120r/gravity/Center/crop/120x120/quality/100/interlace/0">
                                                    <input type="hidden" id="chaigai" value="{$tuzhi.chaigai}">

                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                                     onclick="checkTuzhi(this)">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        平面布局图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"

                                                         src="{$qn_domain}/{$tuzhi.buju}?imageMogr2/auto-orient/thumbnail/!120x120r/gravity/Center/crop/120x120/quality/100/interlace/0">
                                                    <input type="hidden" id="buju" value="{$tuzhi.buju}">


                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                                     onclick="checkTuzhi(this)">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        地面材质示意图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"


                                                         src="{$qn_domain}/{$tuzhi.shiyi}?imageMogr2/auto-orient/thumbnail/!120x120r/gravity/Center/crop/120x120/quality/100/interlace/0">
                                                    <input type="hidden" id="shiyi" value="{$tuzhi.shiyi}">


                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                                     onclick="checkTuzhi(this)">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        顶面天花布局图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"

                                                         src="{$qn_domain}/{$tuzhi.dingmian}?imageMogr2/auto-orient/thumbnail/!120x120r/gravity/Center/crop/120x120/quality/100/interlace/0">
                                                    <input type="hidden" id="dingmian" value="{$tuzhi.dingmian}">

                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                                     onclick="checkTuzhi(this)">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        顶面天花尺寸图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"


                                                         src="{$qn_domain}/{$tuzhi.dingmian_chichun}?imageMogr2/auto-orient/thumbnail/!120x120r/gravity/Center/crop/120x120/quality/100/interlace/0">
                                                    <input type="hidden" id="dingmian_chichun"
                                                           value="{$tuzhi.dingmian_chichun}">

                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                                     onclick="checkTuzhi(this)">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        开关面板示意图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"

                                                         src="{$qn_domain}/{$tuzhi.kaiguan}?imageMogr2/auto-orient/thumbnail/!120x120r/gravity/Center/crop/120x120/quality/100/interlace/0">
                                                    <input type="hidden" id="kaiguan" value="{$tuzhi.kaiguan}">


                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more " style="padding: 2px;"
                                                     onclick="checkTuzhi(this)">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        墙面装饰布局图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"

                                                         src="{$qn_domain}/{$tuzhi.qiangmian}?imageMogr2/auto-orient/thumbnail/!120x120r/gravity/Center/crop/120x120/quality/100/interlace/0">
                                                    <input type="hidden" id="qiangmian" value="{$tuzhi.qiangmian}">


                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                                     onclick="checkTuzhi(this)">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        平面索引图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"

                                                         src="{$qn_domain}/{$tuzhi.suoyin}?imageMogr2/auto-orient/thumbnail/!120x120r/gravity/Center/crop/120x120/quality/100/interlace/0">
                                                    <input type="hidden" id="suoyin" value="{$tuzhi.suoyin}">


                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                                     onclick="checkTuzhi(this)">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        立面图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"

                                                         src="{$qn_domain}/{$tuzhi.limian}?imageMogr2/auto-orient/thumbnail/!120x120r/gravity/Center/crop/120x120/quality/100/interlace/0">
                                                    <input type="hidden" id="limian" value="{$tuzhi.limian}">


                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                                     onclick="checkTuzhi(this)">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        剖面图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"
                                                         src="{$qn_domain}/{$tuzhi.paomian}?imageMogr2/auto-orient/thumbnail/!120x120r/gravity/Center/crop/120x120/quality/100/interlace/0">
                                                    <input type="hidden" id="paomian" value="{$tuzhi.paomian}">

                                                </div>
                                            </div>


                                        </div>

                                    </div>


                                    <div class="layui-form-item form-footer2">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="add_stage">立即提交</button>
                                            <button class="layui-btn" lay-submit lay-filter="send_stage">提交并发布</button>
                                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
</div>


<script>
    //项目id
    var id = "{$Request.param.id}";
    // console.log(id);

    var app = new Vue({
        el: '#app',
        data: {
            cailiao: "选择",
            items: [],
            goods: [
                {
                    goods_id: 1,
                    goods_name: '感应开关',
                    goods_num: 100,
                }
            ],
        },
        methods: {

            delGood: function (index) {
                this.list.splice(index, 1);
            },
        },
    });

    function checkTuzhi(that) {
        if ($(that).hasClass("check")) {
            $(that).removeClass("check");
        }
        else {
            $(that).addClass("check");
        }


    }


    function set_goods() {

    }


    layui.use(['form', 'upload', 'laydate'], function () {
        var $ = layui.$
            , layer = layui.layer
            , form = layui.form;
        var upload = layui.upload;
        var laydate = layui.laydate;

        //网站设置
        //监听submit提交
        form.on('submit(add_stage)', function (obj) {
            var worker = "";
            var groupCheckbox = $("input[name='wt']");
            // console.log("c"+groupCheckbox[0]);
            for (var i = 0; i < groupCheckbox.length; i++) {
                if (groupCheckbox[i].checked) {
                    var val = groupCheckbox[i].value;
                    // console.log("c1223"+val);
                    if (worker.length > 0) {
                        worker += "," + val;
                    } else {
                        worker += val;
                    }

                }
            }
            var tuzhi = [];

            var tu = $(".check");
            tu.each(function (index, ele) {
                var inp2 = $(ele).find('input');
                var e = {}
                e[inp2.attr('id')] = inp2.val();
                tuzhi.push(e);

            });


            obj.field["tuzhi"] = tuzhi;

            //console.log("ck"+ worker);
            obj.field["worker_type"] = worker;
            var localGood = layui.data('good');
            obj.field["material"] = [];
            if (!jQuery.isEmptyObject(localGood.goodList)) {
                obj.field["material"] = localGood.goodList;
            }
            obj.field["s"] = 'add';
            obj.field["project_id"] = id;
//            layer.msg(JSON.stringify(obj.field)); obj.field为当前容器的全部表单字段，名值对形式：{name: value}
            $.post("{:url('add_stage')}", obj.field, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1});
                    app.cailiao = "选择";
                    $('#pic1 img').attr('src', '/res/img/thumb.png');
                    $('.layui-form')[0].reset();
                    layui.data('good', null);
                    return false;
                } else {
                    layer.msg(res.msg, {icon: 2}, function () {

                    })
                    return false;
                }

            });
            return false;
        });
        form.on('submit(send_stage)', function (obj) {
            var worker = "";
            var groupCheckbox = $("input[name='wt']");
            // console.log("c"+groupCheckbox);
            for (var i = 0; i < groupCheckbox.length; i++) {
                if (groupCheckbox[i].checked) {
                    var val = groupCheckbox[i].value;
                    if (worker.length > 0) {
                        worker += "," + val;
                    } else {
                        worker += val;
                    }

                }
            }
            //console.log("ck"+ worker);
            obj.field["worker_type"] = worker;
            //console.log("ckb"+ obj.field["worker_type"] );

            var localGood = layui.data('good');
            obj.field["material"] = [];
            if (!jQuery.isEmptyObject(localGood.goodList)) {
                obj.field["material"] = localGood.goodList;
            }
            obj.field["s"] = 'send';
            obj.field["project_id"] = id;

//            layer.msg(JSON.stringify(obj.field)); obj.field为当前容器的全部表单字段，名值对形式：{name: value}
            $.post("{:url('add_stage')}", obj.field, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1});
                    app.cailiao = "选择";
                    $('#pic1 img').attr('src', '/res/img/thumb.png');
                    $('.layui-form')[0].reset();
                    layui.data('good', null);
                    return false;
                } else {
                    layer.msg(res.msg, {icon: 2}, function () {

                    })
                    return false;
                }

            });
            return false;
        });
        //拖拽上传
        upload.render({
            elem: '#pic1'
            , url: '/tool/qiniu/upload'
            , before: function () {
                layer.load(2);
            }
            , done: function (res) {
                layer.closeAll();
                console.log(res)
                $('#pic1 img').attr('src', res.data.url);//完整url
                $('#pic1 input').val(res.data.pic);//存入数据库中的部分url
            }
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#time' //指定元素
        });

        laydate.render({
            elem: '#time2' //指定元素
        });
    });

    function select_material() {
        layer.open({
            type: 2,
            title: '材料',
            shadeClose: true,
            shade: 0.01,
            area: ['80%', '80%'],
            content: "{:url('select_material')}",
        });
    }
</script>
</body>
</html>